<template>
  <div>
    <r-search
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :searchData="searchData"
    />

    <div v-if="role == 3 || role == 4" class="pw100 mb20 flex flex_sa">
      <div class="flex_aj">
        <div class="mbox bg_1">
          <p>账户总收益</p>
          <p>{{ bankinf && bankinf.totalRevenue }}元</p>
        </div>
        <div class="mbox bg_2">
          <p>可提Balance</p>
          <p>{{ bankinf && bankinf.withdrawMoney }}元</p>
        </div>
      </div>
      <div class="flex column bd">
        <div class="ft13">
          <p class="flex_a sb">
            <i>银行卡号: {{ (bankinf && bankinf.bankCard) || "None" }}</i>
            <i style="cursor:pointer" class="btn" @click="dialogVisible = true"
              >修改</i
            >
          </p>
          <p class="mt10">开户行: {{ (bankinf && bankinf.bank) || "None" }}</p>
          <p class="mt10">
            开户人Name: {{ (bankinf && bankinf.holder) || "None" }}
          </p>
        </div>
        <p
          style="cursor:pointer"
          @click="dialogVisible2 = true"
          class="btn mt20 tac"
        >
          发起提现
        </p>
      </div>
    </div>
    <r-table
      :isPagination="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      @refresh="init()"
    ></r-table>
    <el-dialog
      title="修改提现信息"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <p class="flex_a">
        <i class="nw flex1 mr20"><i class="danger">*</i> 银行卡号</i>
        <el-input
          class="flex5"
          v-model="inf.bankCard"
          placeholder="Please Input银行卡号"
        ></el-input>
      </p>
      <p class="flex_a mt20">
        <i class="nw flex1 mr20"><i class="danger">*</i> 开户行</i>
        <el-input
          class="flex5"
          v-model="inf.bank"
          placeholder="Please Input开户行"
        ></el-input>
      </p>
      <p class="flex_a mt20">
        <i class="nw flex1 mr20"><i class="danger">*</i> 开户人姓名</i>
        <el-input
          class="flex5"
          v-model="inf.holder"
          placeholder="Please Input开户人姓名"
        ></el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="enterEdit">Confirm</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="Request Withdrawal"
      :visible.sync="dialogVisible2"
      width="40%"
      :before-close="handleClose"
    >
      <!-- <span>这是一段信息</span> -->
      <p>
        <i class="fw c6">可提Balance: </i>
        <i class="ft40 c6 fw">￥{{ bankinf && bankinf.withdrawMoney }}</i>
      </p>
      <p class="mt20 flex column">
        <i class="nw flex1 mr20"><i class="danger">*</i> Withdrawal Amount</i>
        <el-input
          class="flex5 mt10"
          v-model="money"
          placeholder="Please InputWithdrawal Amount"
        ></el-input>
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">Cancel</el-button>
        <el-button type="primary" @click="enterTake">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisible2: false,
      bankinf: {},
      inf: {},
      money: "",
      searchData: {
        number: "",
        name: "",
        roleType: "",
        state: "",
        etime: "",
        updateEtime: "",
        sType: "2"
      },
      searchForm: [
        {
          type: "input",
          prop: "number",
          placeholder: "Order Nnumber",
          width: 150
        },
        {
          type: "input",
          prop: "name",
          placeholder: "提现对象",
          width: 150,
          isShow: e => sessionStorage.getItem("role") == 2
        },
        {
          type: "select",
          prop: "roleType",
          placeholder: "Type",
          width: 150,
          options: [
            {
              label: "Agent",
              value: 3
            },
            {
              label: "商家",
              value: 4
            }
          ],
          isShow: e => sessionStorage.getItem("role") == 2
        },
        {
          type: "select",
          prop: "state",
          placeholder: "Status",
          width: 150,
          options: [
            {
              label: "未Pass",
              value: 2
            },
            {
              label: "已Pass",
              value: 1
            },
            {
              label: "Pending Review",
              value: 3
            }
          ]
        },
        {
          type: "date",
          prop: "etime",
          placeholder: "Application Time",
          width: 160
        },
        {
          type: "date",
          prop: "updateEtime",
          placeholder: "处理时间",
          width: 160
        }
      ],
      searchHandle: [
        {
          label: "Search",
          type: "success",
          icon: "el-icon-search",
          handle: e => this.init()
        },
        {
          label: "Reset",
          icon: "el-icon-refresh-right",
          handle: e => this.searchFromReset()
        },
        {
          label: "ExportExcel",
          icon: "el-icon-download",
          type: "success",
          loading: false,
          handle: that => this.handleDownload()
        }
      ],
      tableData: [],
      tableCols: [
        {
          label: "提现编号",
          prop: "number"
          // theme: e => e.status ? 'primary' : 'danger', type: "tag",
        },
        {
          label: "Application Time",
          prop: "createdTime"
        },
        {
          label: "提现Type",
          prop: "type",
          formatter: e =>
            e.type == 1
              ? "银行卡"
              : e.type == 2
              ? "WeChat"
              : e.type == 3
              ? "Alipay"
              : ""
        },
        {
          label: "提现对象",
          prop: "name"
        },
        {
          label: "Withdrawal Amount",
          prop: "money"
        },
        {
          label: "Status",
          prop: "state",
          theme: e =>
            e.state == 2 ? "danger" : e.state == 1 ? "success" : "primary",
          type: "tag",
          formatter: e =>
            e.state == 1
              ? "Review Pass"
              : e.state == 2
              ? "审核不Pass"
              : e.state == 3
              ? "Pending Review"
              : ""
        },
        {
          label: "处理人",
          prop: "updatedBy"
        },
        {
          label: "处理时间",
          prop: "updatedTime",
          width: 160,
          formatter: e =>
            e.updatedTime &&
            this.getDeta(+new Date(e.updatedTime.replace(/T/g, " ")))
        },
        {
          label: "Operations",
          type: "button",
          btnList: [
            {
              label: "View Details",
              type: "primary",
              // isShow: e => e.state == '未处理' ? false : true,
              handle: e => this.goDetail(e.number)
            }
          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      role: 0
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      this.role = sessionStorage.getItem("role");
      let parm = { ...this.tablePage, ...this.searchData };
      let res = await this.api.takecashList(parm);
      if (res.data) {
        this.tableData = res.data.list;
        this.tablePage.total = res.data.total;
      }
      let res2 = await this.api.getbank();
      if (res2) {
        this.bankinf = res2.data;
        this.inf = {
          bankCard: res2.data.bankCard,
          bank: res2.data.bank,
          holder: res2.data.holder
        };
      }
    },
    open() {
      this.$message({
        message: "修改Success",
        type: "success"
      });
    },
    open2() {
      this.$message({
        message: "申请Success",
        type: "success"
      });
    },
    async enterEdit() {
      let res = await this.api.setbank({ ...this.inf });
      if (res) {
        this.dialogVisible = false;
        this.open();
        this.init();
      }
    },
    async enterTake() {
      let res = await this.api.takemoney({
        bankInfo: JSON.stringify(this.inf),
        money: this.money
      });
      if (res) {
        this.dialogVisible2 = false;
        this.open2();
        this.init();
      }
    },
    handleClose() {
      this.dialogVisible = false;
      this.dialogVisible2 = false;
    },
    goDetail(number) {
      this.$router.push({ path: "/moneyManagement-Detail", query: { number } });
    },
    //Search
    elFormSubmit() {},
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          // if (j === 'connectedStatus') {
          //     return v[j] == 1 ? "Online" : "Offline"
          // } else if (j === 'status') {
          //     return v[j] == 1 ? "正常" : v[j] == 2 ? "设备维护中" : "Nonactivated"
          // } else {
          return v[j];
          // }
        })
      );
    }
  }
};
</script>
<style scoped lang="scss">
.mbox {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  min-width: 200px;
  p:first-child {
    margin-bottom: 20px;
  }
}
.bg_1 {
  background-color: rgba(0, 153, 204, 1);
}
.bg_2 {
  background-color: rgba(102, 102, 204, 1);
}
.btn {
  padding: 5px 10px;
  background: #3399ff;
  color: #fff;
}
.bd {
  min-width: 300px;
  border: 1px solid #f5f5f5;
  padding: 10px 20px;
}
.nw {
  white-space: nowrap;
}
.danger {
  color: #f12b2b;
}
</style>
